import React from "react";
import { Button, Flex, Form, Input, message } from "antd";
import { PlusOutlined, SearchOutlined, SyncOutlined } from "@ant-design/icons";
import { useAppDispatch, useAppSelector } from "@/store";

import { global_const } from "@/utils/constent";
import {
  get_sys_dict_data_page,
  select_active_dict_type_id,
  set_dict_data_page_params,
  set_is_show_dict_data_modal,
} from "@/store/slice/SysDict";
import { refreshDictCache } from "@/api/sys/sysDict";
import useRenderCheck from "@/hooks/renderCheck";

function SysDictDataTableSearch() {
  useRenderCheck("SysDictDataTableSearch")
  const [form] = Form.useForm();
  const dispatch = useAppDispatch();
  const active_dict_type_id = useAppSelector(select_active_dict_type_id);
  function searchQuery() {
    const params = {
      dictTypeId: active_dict_type_id,
      current: 1,
      size: global_const.default_page_size,
      query: form.getFieldValue("query"),
    };
    dispatch(set_dict_data_page_params(params));
    dispatch(get_sys_dict_data_page(params));
  }

  function handleAddClick() {
    dispatch(
      set_is_show_dict_data_modal({
        show: true,
        mode: 1,
        title: "新增字典数据",
        data: { dictTypeId: active_dict_type_id },
      })
    );
  }
  function handleRefreshCacheClick(){
    refreshDictCache().then((res) => {
      if (res) {
        message.open({
          type: "success",
          content: "刷新缓存成功!",
        });
      }
    })
  }
  return (
    <>
      <div className="table-header">
        <div className="table-header-left">字典数据</div>
        <div className="table-header-right">
          <Form form={form} layout="inline">
            <Form.Item name="query">
              <Input placeholder="名称/值" allowClear />
            </Form.Item>
            <Form.Item>
              <Flex gap="small" wrap>
                <Button
                  onClick={searchQuery}
                  type="primary"
                  icon={<SearchOutlined />}
                >
                  查询
                </Button>
                <Button
                  onClick={handleAddClick}
                  type="primary"
                  icon={<PlusOutlined />}
                >
                  新增
                </Button>
                <Button
                  onClick={handleRefreshCacheClick}
                  type="primary"
                  icon={<SyncOutlined />}
                >
                  刷新缓存
                </Button>
              </Flex>
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  );
}
export default React.memo(SysDictDataTableSearch);
